import React, {JSX} from 'react';
import {Image, View, Text} from "@tarojs/components";
import Taro from "@tarojs/taro";
import Col, {ICol} from "../../components/view/Col";
import HeadTitle from "../../components/view/HeadTitle";
import './index.scss';
import '../../reset.scss'

const MainRows: Array<ICol> = [
  // eslint-disable-next-line import/no-commonjs
  {title: '我的订单', icon: require('@/static/images/owner/MainRow/order.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '我的早餐', path: 'subPages/food/f_order/index', icon: require('@/static/images/owner/MainRow/food.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '我的卡券', icon: require('@/static/images/owner/MainRow/ticket.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '我的权益', icon: require('@/static/images/owner/MainRow/rights.png')},
]

const Activities: Array<ICol> = [
  // eslint-disable-next-line import/no-commonjs
  {title: '分销', icon: require('@/static/images/owner/Activity/fenxiao.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '砍价', icon: require('@/static/images/owner/Activity/kanjia.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '竞猜', icon: require('@/static/images/owner/Activity/jingcai.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '', icon: ''}
]

const Utils1: Array<ICol> = [
  // eslint-disable-next-line import/no-commonjs
  {title: '充值', icon: require('@/static/images/owner/Utils/hui_yuan_chong_zhi.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '会员卡', icon: require('@/static/images/owner/Utils/VIP.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '余额记录', icon: require('@/static/images/owner/Utils/yu_e.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '积分记录', icon: require('@/static/images/owner/Utils/ji_fen.png')}
]

const Utils2: Array<ICol> = [
  // eslint-disable-next-line import/no-commonjs
  {title: '签到', icon: require('@/static/images/owner/Utils/qian_dao.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '抽奖', icon: require('@/static/images/owner/Utils/chou_jiang.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '盲盒', icon: require('@/static/images/owner/Utils/mang_he.png')},
  // eslint-disable-next-line import/no-commonjs
  {title: '', icon: ''}
]
export default React.memo(function IndexPage(): JSX.Element {
  const onRoute = (path: string) => {
    return Taro.navigateTo({url: path})
  }
  return (
    <View id='owner'>
      <View className='Bg'>
        <View className='introduce align-center'>
          <View className='avatar'>
            <Image lazyLoad src={require('@/static/images/owner/Bg/avatar.png')}></Image>
          </View>
          <View className='info'>
            <View className='name'></View>
            <View className='tip'>请完善个人信息</View>
          </View>
        </View>

        <View className='card align-center'>
          <View className='item'>
            <Text>余额:</Text>
            <Text></Text>
          </View>
          <View className='split'></View>
          <View className='item'>
            <Text>积分:</Text>
            <Text></Text>
          </View>
        </View>
      </View>

      <View className='Vip'>
        <Image lazyLoad className='bg' src={require('@/static/images/owner' + '/VIP/NotVip.png')}></Image>
        <View className='wrapper'>
          <View className='box align-center'>
            <Image lazyLoad className='img' src={require('@/static/images/owner' + '/VIP/huang_guan.png')}></Image>
            <Text className='text'>立即激活</Text>
          </View>
          <View className='tip'>成为酒店会员，入住享受会员房价格</View>
        </View>
      </View>

      <View className='MainRow'>
        <View className='justify-between'>
          {MainRows.map(colItem => (
            <View key={colItem.title}  onClick={() => onRoute(colItem.path)}>
              <Col title={colItem.title} icon={colItem.icon}></Col>
            </View>
          ))}
        </View>
      </View>

      <View className='split'> </View>
      <HeadTitle title='我的活动' border></HeadTitle>
      <View className='Activity justify-between'>
        {Activities.map(colItem => (
          <Col key={colItem.title} title={colItem.title} icon={colItem.icon}></Col>
        ))}
      </View>

      <View className='split'> </View>
      <HeadTitle title='常用工具' border></HeadTitle>
      <View className='Utils justify-between align-center'>
        {Utils1.map(colItem => (
          <Col key={colItem.title} title={colItem.title} icon={colItem.icon}></Col>
        ))}
      </View>
      <View className='Utils justify-between align-center'>
        {Utils2.map(colItem => (
          <Col key={colItem.title} title={colItem.title} icon={colItem.icon}></Col>
        ))}
      </View>

      <View className='split'> </View>
      <View className='split'> </View>

    </View>
  )
})
